<!DOCTYPE html>
<html lang="en">
<head>
	<title>Roll-ups</title>

	<link rel="icon"
		  type="image/png"
		  href="../img/favicon.png"/>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet"
		  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link href="rollup.css" rel="stylesheet">

	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>-->
	<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
	<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
	<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>-->
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.1/ui-bootstrap-tpls.js"></script>-->
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.3/angular-strap.min.js"></script>-->
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.3/angular-strap.tpl.min.js"></script>-->

	<script src="../rollup-js/third-party/underscore-min-1.8.3.js"></script>
	<script src="../rollup-js/third-party/jquery-min-2.1.3.js"></script>
	<script src="../rollup-js/third-party/bootstrap-min-3.3.5.js"></script>
	<script src="../rollup-js/third-party/angular-min-1.4.5.js"></script>
	<script src="../rollup-js/third-party/angular-ui-bootstrap-min-0.14.1.js"></script>
	<script src="../rollup-js/third-party/angular-strap-min-2.3.3.js"></script>
	<script src="../rollup-js/third-party/angular-strap.tpl-min-2.3.3.js"></script>
	<script src="../rollup-js/third-party/bootbox.js"></script>
	<script src="rollup.js"></script>
	<script src="../rollup-js/kairosdbDatasource.js"></script>
	<script src="createController.js"></script>
	<script src="pasteQueryController.js"></script>

</head>

<!-- *********** TODO replace all method calls to point to model for performance reasons  *********  -->

<body ng-app="rollupApp" ng-controller="rollupController">
<div class="container-fluid" style="width:90%">
	<div class="page-header">
		<h1 class="text-center text-info">Roll-ups
			<a href="#" ng-click="addRollupTask()"
			   class="btn btn-primary btn-lg btn-circle pull-right">
				<span class="glyphicon glyphicon-plus"></span></a>
		</h1>

		<div class="text-info" style="width: 50%; float: none; margin: 0 auto;">
			Roll-ups are a way to improve query performance by aggregating or
			rolling up data into a larger time range such as averaging
			millisecond data over a minute.
			Roll-ups perform queries on existing data, aggregate the data, and
			write the results to another metric. The original data is left
			intact.
			Roll-ups are continuously run on a schedule rolling up a small time
			period of data on each execution.
		</div>

		<span id="lastSaved" class="last-saved pull-left text-info small"
			  ng-hide="lastSaved ==null">Last Saved {{lastSaved}}</span>
	</div>

	<div class="panel-group" id="accordion">
		<div ng-repeat="task in tasks">
			<div class="panel panel-default">
				<div class="panel-heading">
					<a class="accordion-toggle" data-toggle="collapse"
					   data-parent="#accordion" href="#{{ task.id }}">
					</a>

					<a href="#" ng-click="deleteRollupTask(task)">
							<span class="taskOperations glyphicon glyphicon-remove text-info"
								  aria-hidden="true" ng-hide="task.edit"></span>
					</a>
					<input class="text-field" type='text'
						   ng-model="task.name"
						   ng-blur="onBlur(task)"
						   focus/>

					<input class="text-field input-mini" type='text'
						   ng-model="task.executionValue"
						   ng-blur="onBlur(task)"/>

					<span class="dropdown schedule">
						<button class="btn btn-default dropdown-toggle"
								type="button" id="executeDropdown"
								data-toggle="dropdown" aria-haspopup="true"
								aria-expanded="true">
							{{ task.executionUnit }}
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu"
							aria-labelledby="executeDropdown">
							<li ng-repeat="unit in executionUnits">
								<a href="#"
								   ng-click="scheduleModified(task, unit)">
									{{ unit }}
								</a>
							</li>
						</ul>
					</span>

					<div id="{{ task.id }}" class="panel-collapse collapse in">
						<div class="panel-heading text-info">Queries
							<a href="#" ng-click="addRollup(task)">
								<span class="queryOperations glyphicon glyphicon-plus text-info"
									  aria-hidden="true"></span>
							</a>
							<a href="#" ng-click="pasteQuery(task)">
								<span class="glyphicon glyphicon-paste text-info"
									  aria-hidden="true"></span>
							</a>
						</div>
						<div class="panel-body">

							<div ng-repeat="rollup in task.rollups">
								<a href="#" ng-click="editRollup(task, rollup)">
									<span class="glyphicon glyphicon-pencil"
										  aria-hidden="true"
										  ng-hide="rollup.edit"></span>
								</a>
								<a href="#"
								   ng-click="deleteRollup(task, rollup)">
									<span class="rollupOperations glyphicon glyphicon-remove"
										  aria-hidden="true"></span>
								</a>

								<span ng-hide="rollup.edit">{{ toTql(rollup) }}</span>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>
</body>
</html>
